<template>
  <div>
    <div class="navTop flex-between">
      <div class="nav-lf">
        <i class="el-icon-s-unfold icon-u"></i>
        <div class="nav">
          <span class="nav-title">首页</span>
          <span class="nav-head"> / {{ title }}</span>
        </div>
      </div>
      <!-- <div class="nav-rt">
        <el-dropdown @command="handleCommand">
          <div class="el-dropdown-link">
            <img class="img" src="../assets/user.jpg" alt="" />
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="loginout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div> -->
    </div>
    <div class="silde">
      <div class="swiper-container silde-list" ref="mySwiper">
        <div class="swiper-wrapper">
          <div
            class="item"
            v-for="(item, index) in sildeList"
            :key="index + 'silde'"
            :class="
              active == index
                ? 'swiper-slide item active'
                : 'swiper-slide item '
            "
          >
            <div v-if="index != 0" class="qiu"></div>
            <span @click.self="selectFn(index, item.url)">{{ item.name }}</span
            ><i
              v-if="index != 0"
              @click.self="deleteSilde(index)"
              class="el-icon-close close"
            ></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navTop",
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.navFn(val);
        this.swpier();
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      sildeList: [{ name: "首页", url: "/externalData" }],
      active: 0,
      title: "外部数据录入",
    };
  },
  mounted() {
    this.swpier();
  },
  methods: {
    swpier() {
      new Swiper(".swiper-container", {
        slidesPerView: this.sildeList.length >= 8 ? 8 : this.sildeList.length,
        spaceBetween: 20,
        freeMode: true,
        loop: false,
      });
    },
    selectFn(index, url) {
      this.active = index;
      this.$router.push({ path: url });
    },
    deleteSilde(index) {
      this.sildeList.splice(index, 1);
      this.active = index - 1;
      this.swpier();
      // if (this.active != 0) {
      this.$router.push({ path: this.sildeList[this.active].url });
      // }
    },
    navFn(val) {
      this.title = val.meta.name;
      if (
        this.title != "置标管理操作" &&
        this.title != "外部数据编辑" &&
        this.title != "试验数据编辑" &&
        this.title != "归档信息管理" &&
        this.title != "标准规范上传"&&
        this.title != "整编库操作"&&
        this.title != "文件详情"&&
        this.title != "文件上传"
      ) {
        let obj = {};
        obj.name = val.meta.name;
        obj.url = val.path;
        if (JSON.stringify(this.sildeList).indexOf(JSON.stringify(obj)) == -1) {
          this.sildeList.push(obj);
          this.active = this.sildeList.length - 1;
        } else {
          this.sildeList.forEach((res, index) => {
            if (res.url == val.path) {
              this.active = index;
            }
          });
        }
      } else {
        this.active = 9999;
      }
    },
    handleCommand(command) {
      window.sessionStorage["token"] = "";
      this.$router.push("/login");
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/css/mixin.scss";
@import "@/css/flex.scss";
.silde {
  width: 100%;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.1);
  opacity: 1;
  border-radius: 0px;
  margin-top: 1px;
  user-select: none;
  .silde-list {
    margin-left: 30px;

    .item {
      width: auto !important;
      padding: 8px 15px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      float: left;
      cursor: pointer;
      margin-right: 10px;
      margin-top: 12px;
      font-size: 16px;
      font-weight: 400;
      color: #1c2536;
      opacity: 0.8;
      span {
        margin-right: 4px;
      }
      .qiu {
        width: 10px;
        height: 10px;
        background: #ffffff;
        border-radius: 50%;
        opacity: 1;
        display: inline-block;
        margin-right: 4px;
      }
      .close {
        color: #132232;
        opacity: 0.6;
        font-weight: bold;
      }
    }
    .active {
      background: #3386fe;
      opacity: 1;
      color: #ffffff;
      .close {
        color: #fff;
        opacity: 1;
        font-weight: bold;
      }
    }
  }
}
.navTop {
  width: 100%;
  height: 80px;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.08);
  opacity: 1;
  border-radius: 0px;
  // overflow: hidden;
  .nav-lf {
    .icon-u {
      width: 30px;
      height: 30px;
      opacity: 0.8;
      font-size: 35px;
      float: left;
      margin-top: 21px;
      margin-left: 30px;
    }
    .nav {
      background: #fff;
      // width: 100%;
      height: 80px;
      background: #ffffff;
      opacity: 1;
      border-radius: 0px;
      line-height: 80px;
      margin-left: 80px;
      .nav-title {
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 0px;
        color: #1c2536;
        opacity: 0.8;
        cursor: pointer;
      }
      .nav-head {
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 0px;
        color: #1c2536;
        opacity: 0.5;
        cursor: pointer;
      }
    }
  }
  .nav-rt {
    @include wh(200px, 50px);
    display: flex;
    align-items: baseline;
    overflow: inherit;
    .img {
      @include wh(50px, 50px);
      cursor: pointer;
      overflow: inherit;
      border-radius: 10px;
    }
  }
}
</style>

